<template>
  <div>
    <el-card>
      <div slot="header" class="df aic jcsb">
        <span>商品分类</span>
        <el-button type="primary" @click="addOrderCate">添加分类</el-button>
      </div>
      <template>
        <el-table :data="tableData" style="width: 100%">
          <!-- 序号 -->
          <el-table-column
            type="index"
            label="序号"
            width="100"
          ></el-table-column>
          <!-- 分类名称 -->
          <el-table-column label="分类名称">
            <template slot-scope="scope">
              <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
              <el-input
                v-else
                size="mini"
                v-model="scope.row.cateName"
              ></el-input>
            </template>
          </el-table-column>
          <!-- 是否开启按钮 -->
          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-switch
                :disabled="!scope.row.isEdit"
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :type="scope.row.isEdit ? 'success' : 'default'"
                @click="handleEdit(scope.row)"
              >
                {{ scope.row.isEdit ? '完成' : '编辑' }}
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block" style="margin-top: 20px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="添加分类"
        :visible.sync="dialogFormVisible"
        width="500px"
      >
        <el-form label-width="80px" :model="addOrderData">
          <el-form-item label="添加分类">
            <el-input v-model="addOrderData.cateName"></el-input>
          </el-form-item>
          <el-switch v-model="addOrderData.addValue" inactive-text="是否启用">
            <template slot-scope="scope">
              <el-switch
                @click="addEidt"
                :disabled="!scope.row.isEdit"
                v-model="scope.row.state"
              ></el-switch>
            </template>
          </el-switch>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button size="small" type="primary" @click="handleConfirm">
            确 定
          </el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {getCateListReq, editCateReq, delCateReq, addCateReq} from '@/api/goods'
export default {
  data() {
    return {
      addOrderData: {
        cateName: '',
        addValue: true,
      },
      // 总条数
      total: 0,
      currentPage: 1,
      pageSize: 3,
      //分类数据
      tableData: [],
      dialogFormVisible: false, //编辑弹窗隐藏显示
    }
  },
  methods: {
    //获取数据方法
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getCateListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {total, data} = res.data

      //修改数据
      data.forEach(v => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false
        //添加一个字段   是否可编辑
        v.isEdit = false
      })

      // 将数据赋值
      this.total = total
      this.tableData = data

      //如果获取data为[]  且currentPage>1自动返回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    // 编辑
    async handleEdit(row) {
      // console.log('row :>> ', row)
      // 把可编辑状态取反
      row.isEdit = !row.isEdit
      //发送请求
      if (!row.isEdit) {
        let res = await editCateReq({
          ...row,
          state: row.state ? 1 : 0,
        })
      }
      //发送请求
    },
    //删除
    async handleDelete(row) {
      // console.log('row :>> ', row);
      // 获取id
      let {id} = row
      //发送请求
      let res = await delCateReq({id})
      //解构数据
      let {code} = res.data
      if (code === 0) {
        this.getData()
      }
    },

    //弹窗是否开启
    addEidt() {},
    // 弹窗   确认
    async handleConfirm(row) {
      // console.log('addOrderData :>> ', this.addOrderData)
      let cateName = this.addOrderData.cateName
      // console.log('this.cateName :>> ', this.addOrderData.cateName)
      let state = this.addOrderData.addValue ? 1 : 0
      //发送请求
      let res = await addCateReq({
        cateName,
        state,
      })

      //解构数据
      let {code} = res.data
      //判断
      if (code === 0) {
        this.getData()
        this.dialogFormVisible = false
      }
    },
    //改变当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    // 添加分类
    addOrderCate(row) {
      //开启弹窗
      this.dialogFormVisible = true
    },
  },
  created() {
    // 初始化发送请求
    this.getData()
  },
}
</script>

<style lang="scss" scoped></style>
